<!-- 机构试卷组件 父级:章节测试 期末考试 普通-->
<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search">
            <div v-show="!isShow" class="search-item">
                <label>试卷类型：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.paperType"
                        placeholder="请选择试卷类型"
                    >
                        <el-option
                            label="章节测试"
                            value="chapterText"
                        ></el-option>
                        <el-option
                            label="期末考试"
                            value="finalExam"
                        ></el-option>
                        <el-option
                            label="普通考试"
                            value="normalExam"
                        ></el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>试卷名称：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.name"
                        clearable
                        placeholder="试卷名称"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <label>学校：</label>
                <el-cascader
                    ref="schoolRef"
                    :key="key"
                    v-model="queryData.schoolCode"
                    :props="schoolProps"
                    :show-all-levels="false"
                    filterable
                    clearable
                    @change="handleSchool"
                ></el-cascader>
            </div>
            <div class="search-item">
                <label>专业：</label>
                <div class="table-query-input">
                    <el-cascader
                        ref="departmentRef"
                        v-model="queryData.departmentId"
                        v-loading="departmentLoading"
                        :options="departmentInfo"
                        placeholder="学科"
                        :show-all-levels="false"
                        clearable
                        filterable
                        :props="{
                            value: 'id',
                            label: 'name',
                            emitPath: false,
                            checkStrictly: true
                        }"
                        @change="handleDepartment"
                    >
                    </el-cascader>
                </div>
            </div>

            <div
                v-if="queryData.paperType !== 'normalExam'"
                class="search-item"
            >
                <label>课程：</label>
                <div class="table-query-input">
                    <el-cascader
                        ref="courseRef"
                        v-model="queryData.courseId"
                        v-loading="flag.course"
                        :options="courseInfo"
                        placeholder="请选择课程"
                        :show-all-levels="false"
                        clearable
                        filterable
                        :props="{
                            value: 'id',
                            label: 'courseName',
                            emitPath: false,
                            checkStrictly: true
                        }"
                    >
                    </el-cascader>
                </div>
            </div>

            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                    >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <!--            <el-button-->
            <!--                type="primary"-->
            <!--                plain-->
            <!--                style="margin-bottom: 2em"-->
            <!--                @click="toAddPg"-->
            <!--            >创建试卷</el-button-->
            <!--            >-->
            <el-button
                v-if="!isShow"
                type="primary"
                plain
                style="margin-bottom: 2em"
                @click="sendToparent"
                >确定选择
            </el-button>
            <el-button
                v-if="isShow"
                type="danger"
                plain
                style="margin-bottom: 2em"
                :disabled="ids.length === 0"
                @click="
                    tableDelete(
                        '/exam/paper/deleted-list',
                        {
                            paperType: queryData.paperType,
                            ids: ids
                        },
                        true
                    )
                "
                >批量删除
            </el-button>
            <el-button
                v-if="isShow"
                type="warning"
                plain
                style="margin-bottom: 2em"
                :disabled="ids.length === 0"
                @click="hide(true)"
                >隐藏
            </el-button>
            <el-button
                v-if="isShow"
                type="warning"
                plain
                style="margin-bottom: 2em"
                :disabled="ids.length === 0"
                @click="hide(false)"
                >公开
            </el-button>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                @row-click="chooseone"
                @current-change="handleSelectionChange"
                @selection-change="handleSelectionChange2"
            >
                <el-table-column v-if="!isShow" width="55" label="选择">
                    <template slot-scope="scope">
                        <el-radio v-model="radio" :label="scope.row.id">
                            <span class="el-radio__label"></span>
                        </el-radio>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="isShow"
                    type="selection"
                    min-width="55"
                    align="center"
                    :resizable="false"
                ></el-table-column>
                <el-table-column
                    prop="name"
                    label="试卷名称"
                    width="130"
                ></el-table-column>
                <el-table-column prop="ruleType" label="组卷方式" width="120">
                    <template slot-scope="scope">
                        {{ ruleType[scope.row.ruleType] }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="departmentName"
                    label="学校专业"
                    width="160"
                ></el-table-column>
                <el-table-column
                    prop="classificationName"
                    label="科目"
                    width="160"
                ></el-table-column>
                <el-table-column
                    prop="courseName"
                    label="所属课程"
                    width="160"
                ></el-table-column>
                <el-table-column
                    prop="totalScore"
                    label="试卷总分"
                    width="120"
                ></el-table-column>
                <el-table-column
                    prop="passScore"
                    label="及格分数"
                    width="120"
                ></el-table-column>
                <el-table-column prop="isHide" label="状态" width="100">
                    <template slot-scope="scope">
                        {{ scope.row.isHide ? "隐藏" : "公开" }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createdByName"
                    label="最后操作者"
                    width="160"
                ></el-table-column>
                <el-table-column
                    prop="createdTime"
                    label="创建时间"
                    width="160"
                ></el-table-column>
                <el-table-column
                    prop="remark"
                    label="试卷描述"
                    width="120"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    v-if="isShow"
                    label="操作"
                    align="center"
                    fixed="right"
                    min-width="300"
                >
                    <template slot-scope="scope">
                        <!--                        <el-button-->
                        <!--                            type="primary"-->
                        <!--                            size="mini"-->
                        <!--                            :loading="scope.row.opLoading"-->
                        <!--                            @click="toEditPg(scope.row)"-->
                        <!--                        >编辑-->
                        <!--                        </el-button>-->
                        <el-button
                            type="warning"
                            icon="el-icon-delete"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/exam/paper/deletePaper',
                                    {
                                        id: scope.row.id,
                                        paperType: scope.row.paperType
                                    },
                                    true,
                                    search
                                )
                            "
                            >删除</el-button
                        >
                        <el-button
                            v-if="!scope.row.edit"
                            type="primary"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="toPaperQuestion(scope.row)"
                            >查看试卷
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <el-dialog
            v-if="paperQuestionVisible"
            title="查看试卷"
            :visible.sync="paperQuestionVisible"
            width="80%"
        >
            <paperQuestionComponent
                :data-form="paperData"
            ></paperQuestionComponent>
            <span slot="footer" class="dialog-footer">
                <el-button @click="paperQuestionVisible = false"
                    >关 闭</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { TablePage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import {
    fetchChapterList,
    fetchClassificationList2,
    fetchCourseList
} from "@/api/course";
import { hidePapers } from "@/api/exam";
import { beanCopy, treeList2Tree } from "@/utils";
import paperQuestionComponent from "@/views/models/exam/component/paperQuestionComponent";
import {
    fetchDepartmentList,
    fetchSchoolChildren,
    fetchSchoolFirst
} from "@/api/user";

export default {
    // 试卷列表
    name: "GroupPaperComponent",
    components: { paperQuestionComponent },
    mixins: [TablePage],
    props: {
        initParam: {
            type: Object,
            default() {
                return {
                };
            }
        },
        isShow: {
            type: Boolean,
            default() {
                return true;
            }
        },
        fromExam: {
            type: Boolean,
            default() {
                return false;
            }
        }
    },
    data() {
        return {
            queryData:{
                ...this.initParam
            },
            paperData: {},
            departmentInfo: [],
            departmentLoading: false,
            paperQuestionVisible: false,
            initAddForm: {
                id: null,
                name: null,
                remark: null,
                actionCodes: []
            },
            schoolProps: {
                lazy: true,
                checkStrictly: true,
                emitPath: false,
                lazyLoad: this.getSchool
            },
            key: 0,
            ids: [],
            radio: null,
            currentSelectItem: {},
            currentSchoolId: null,
            actions: null,
            actionSearch: null,
            src:
                "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
            dataFormRule: {
                name: [
                    {
                        required: true,
                        message: "请输入考试名称",
                        trigger: "blur"
                    }
                ],

                paperType: [
                    {
                        required: true,
                        message: "请选择考试类型",
                        trigger: "change"
                    }
                ],
                courseId: [
                    { required: true, message: "请选择课程", trigger: "change" }
                ],
                chapterId: [
                    { required: true, message: "请选择章节", trigger: "change" }
                ]
            },
            courseInfo: [],
            chapterInfo: [],
            classificationInfo: [],
            flag: {
                classfication: false,
                course: false,
                chapter: false
            },
            courseQueryData: {
                size: 1000,
                courseSubjectId: ""
            },
            chapterQueryData: {
                size: 1000,
                baseCourseId: ""
            },
            classficationQueryData: {
                size: 1000
            }
        };
    },
    computed: {
        ...mapState({
            status: state => state.status.paperType,
            ruleType: state => state.status.ruleType
        })
    },
    watch: {
        actionSearch(val) {
            this.$refs.tree.filter(val);
        }
    },
    mounted() {},
    methods: {
        clearQuery() {
            this.queryData = {};
            this.search();
        },
        search() {
            if (!this.isShow) {
                this.queryData.isHide = false;
            }
            this.loadTable("/exam/paper/page", this.queryData).then(res => {});
        },

        toEditPg(data) {
            this.$router.push({
                name: "AddPaper",
                params: {
                    paperType: this.queryData.paperType,
                    dataForm: data,
                    addAction: false,
                    fromExam: this.fromExam
                }
            });
        },
        toAddPg() {
            let obj = {};
            beanCopy(this.queryData, obj, true);
            this.$router.push({
                name: "AddPaper",
                params: {
                    paperType: this.queryData.paperType,
                    dataForm: obj,
                    addAction: true,
                    fromExam: this.fromExam
                }
            });
        },
        handleSelectionChange(row) {
            this.currentSelectItem = row;
        },
        handleSelectionChange2(val) {
            this.ids = [];
            const length = val.length;
            for (let n = 0; n < length; n++) {
                this.ids.push(val[n].id);
            }
        },
        chooseone(row) {
            this.radio = row.id;
        },
        sendToparent() {
            this.$emit("paperSelectEvent", this.currentSelectItem);
            this.radio = null;
            this.currentSelectItem = {};
        },
        //获取课程所属科目
        // getClassfication() {
        //     this.flag.classfication=true;
        //     fetchClassificationList2(this.classficationQueryData).then(res =>{
        //         this.classificationInfo=treeList2Tree(res);
        //         this.flag.classfication=false;
        //     })
        //
        // },
        //根据学校查询专业
        getSchool(node, resolve) {
            const { level } = node;
            let disable = false;
            if (!node.data) {
                fetchSchoolFirst().then(res => {
                    if (res !== null) {
                        const nodes = Array.from(res).map(item => {
                            disable =
                                (this.currentSchoolId !== null &&
                                    item.id === this.currentSchoolId) ||
                                "vip-langrun" === item.code;
                            return {
                                value: item.code,
                                label: `${item.name}`,
                                leaf:
                                    level >= (item.children.length > 0 ? 1 : 0),
                                code: item.code,
                                disabled: disable
                            };
                        });
                        resolve(nodes);
                    }
                });
            } else {
                fetchSchoolChildren({ id: node.data.value }).then(res => {
                    const nodes = Array.from(res).map(item => {
                        disable =
                            (this.currentSchoolId !== null &&
                                item.id === this.currentSchoolId) ||
                            this.currentSchoolId === item.parentId ||
                            "vip-langrun" === item.code;
                        return {
                            value: item.code,
                            label: `${item.name}`,
                            leaf:
                                level >=
                                (item.children.length > 0 ? level + 1 : 0),
                            code: item.code,
                            disabled: disable
                        };
                    });
                    resolve(nodes);
                });
            }
        },
        handleSchool(data) {
            let checkedNodes = this.$refs.schoolRef.getCheckedNodes();

            this.queryData.schoolCode = checkedNodes[0].data.code;
            this.departmentLoading = true;
            fetchDepartmentList(
                { schoolCode: this.queryData.schoolCode, type: "xklb" },
                "查询专业信息异常"
            ).then(res => {
                this.departmentInfo = treeList2Tree(res);
                this.departmentLoading = false;
            });
        },
        // getDepartment(){
        //
        //     this.departmentLoading=true;
        //     fetchDepartmentList({schoolCode:this.queryData.schoolCode,type:"jxbm",levelType:"zy"},"查询专业信息异常").then(res =>{
        //         this.departmentInfo=treeList2Tree(res);
        //         this.departmentLoading=false;
        //     })
        // },
        //获取选中学科 查询课程
        // handleClassficationId(value){
        //     this.queryData.courseId=null;
        //     this.queryData.chapterId=null;
        //     this.flag.course=true;
        //     this.courseQueryData.courseSubjectId = value;
        //     fetchCourseList(this.courseQueryData,"查询课程信息异常").then(res =>{
        //         this.courseInfo=treeList2Tree(res);
        //         this.flag.course=false;
        //
        //     })
        // },
        //获取选中学科 查询课程
        handleDepartment(value) {
            this.queryData.courseId = null;
            this.queryData.chapterId = null;
            this.flag.course = true;
            this.courseQueryData.schoolMajorId = value;
            fetchCourseList(this.courseQueryData, "查询课程信息异常").then(
                res => {
                    this.courseInfo = treeList2Tree(res);
                    this.flag.course = false;
                }
            );
        },
        //根据课程id查询章节id
        handleChapterId(value) {
            this.queryData.chapterId = null;
            this.flag.chapter = true;
            this.chapterQueryData.courseId = value;
            fetchChapterList(this.chapterQueryData, "查询章节信息异常").then(
                res => {
                    this.chapterInfo = treeList2Tree(res);
                    this.flag.chapter = false;
                }
            );
        },
        toPaperQuestion(data) {
            this.paperData = data;
            this.paperQuestionVisible = true;
        },
        hide(val) {
            hidePapers({
                paperType: this.queryData.paperType,
                ids: this.ids,
                isHide: val
            }).then(res => {
                if (res) {
                    this.search();
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
    background: #fff;
    border-radius: 0.3em 0.3em 0 0;
    padding-bottom: 1em;
    padding-top: 1em;
    padding-left: 1em;
    margin-top: 16px;
    .container-content {
        padding-top: 12px;
        p {
            color: #909399;
            font-size: 15px;
            padding-top: 12px;
        }
    }
    .container-right {
        margin-left: 12px;
        margin-top: 2em;
        .r-img {
            max-width: 240px;
            max-height: 160px;
        }
        .r-btn {
            margin-top: 22px;
        }
    }
}
.table-search-box {
    padding-left: 17px;
    font-size: 16px;
}
</style>
